<template>
    <div class="orderList">
        <div class="page-wrap w">
            <div class="orderList-table">
                <table class="order-head">
                    <tbody>
                        <tr>
                            <th class="order_info">商品信息</th>
                            <th class="receiver_name">收货人</th>
                            <th class="receiver_mobile">手机号</th>
                            <th class="order_price">单价</th>
                            <th class="order_num">数量</th>
                            <th class="oreceiver_addresss">地址</th>
                            <th class="real_pay">实付款</th>
                            <th class="receiver_remark">备注</th>
                            <!-- <th class="order_status">订单状态</th> -->
                            <th class="order_handle">交易操作</th>
                        </tr>
                    </tbody>
                </table>
                <div v-for="(item, index) in list" :key="index" class="order-body">
                    <!-- 头部的订单号和订单创建的时间 -->
                    <table class="body_top">
                        <tbody>
                            <br />
                            <div class="body_top_con">
                                <div class="top_con_shop">
                                    <span class="top_con_time">{{ item.createTime }}</span>
                                    <span class="top_con_num">订单号：{{ item.orderId }}</span>
                                </div>
                                <div class="top_con_del">
                                    <i class="el-icon-delete"></i>
                                </div>
                            </div>
                        </tbody>
                    </table>
                    <!-- 具体的订单信息,如总价等 -->
                    <table>
                        <tbody>
                            <tr class="body_content">
                                <div v-for="(work, inx) in item.itemDataList" :key="inx">
                                    <td colspan="" rowspan="" headers="" class="body_content_info">
                                        <div class="info_box">
                                            <!-- 商品信息的图片 -->
                                            <div class="info_box_img" @click="viewGood(work)">
                                                <img :src="work.img" alt="" />
                                            </div>
                                            <!-- 商品信息的描述 -->
                                            <div class="info_describe">
                                                <p class="text" @click="viewGood(work)">
                                                    <span>{{ work.text }}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </td>
                                    <!-- 收货人 -->
                                    <td colspan="" rowspan="" headers="" class="receiver_name body_content_name">
                                        <p>{{ item.receiverName }}</p>
                                    </td>
                                    <!-- 收货号码 -->
                                    <td colspan="" rowspan="" headers="" class="receiver_mobile body_content_mobile">
                                        <p>{{ item.receiverMobile }}</p>
                                    </td>
                                    <!-- 商品价格 -->
                                    <td colspan="" rowspan="" headers="" class="order_price body_content_price">
                                        <p>￥{{ work.price }}</p>
                                    </td>
                                    <!-- 商品数量 -->
                                    <td colspan="" rowspan="" headers="" class="order_num body_content_num">
                                        <p>{{ work.num }}</p>
                                    </td>
                                    <!-- 地址 -->
                                    <td colspan="" rowspan="" headers="" class="receiver_address body_content_address">
                                        <p>{{ item.receiverAddress }}</p>
                                    </td>
                                    <td colspan="" rowspan="" headers="" class="real_pay body_content_pay">
                                        <p>{{ item.totalPayment }}</p>
                                    </td>
                                    <!-- 备注 -->
                                    <td colspan="" rowspan="" headers="" class="receiver_remark body_content_Remark">
                                        <p>{{ item.receiverRemark }}</p>
                                    </td>
                                    <!-- 操作 -->
                                    <td colspan="" :rowspan="item.itemDataList.length" headers=""
                                        class="order_handle body_content_ohandle">
                                        <p v-if="item.status === null">
                                            <el-button size="mini" type="danger" @click="pay">立即付款</el-button>
                                        </p>
                                        <p v-if="item.status === null" class="order_cancel">
                                            <span>取消订单</span>
                                        </p>
                                        <p class="order_cancel">
                                            <!-- <span>再次购买</span> -->
                                        </p>
                                    </td>
                                </div>


                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
import axios from 'axios';
export default {
    name: 'orderList',
    components: {},
    data() {
        return {
            list: [
                //   {
                //     createTime: '2023-01-27 14:17:06',
                //     orderId: 16117282260421,
                //     status: 1,
                //     receiverName:'1',
                //     receiverMobile:'1',
                //     orderRemark:'',
                //     receiverAddress:'1',
                //     totalPayment: '444.00',
                //     itemDataList: [
                //       {
                //         goodsId: 1609983892472866,
                //         img: 'https://img0.baidu.com/it/u=1414232962,2149362867&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                //         num: 1,
                //         price: '444.00',
                //         text: '小米 11 xiaomi'
                //       }
                //     ]
                //   },
                //   {
                //     createTime: '2023-01-22 16:27:36',
                //     orderId: 16113040562157,
                //     status: 1,
                //     receiverName:'1',
                //     orderRemark:'',
                //     receiver_mobile:'1',
                //     receiver_address:'1',
                //     total_Payment: '283666.00',
                //     itemDataList: [
                //       {
                //         goods_Id: 1609914198055593,
                //         img: 'https://img0.baidu.com/it/u=1414232962,2149362867&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                //         num: 5,
                //         price: '39995.00',
                //         text: '华为mate40pro 5G手机 亮黑色 8+256G全网通（碎屏险套餐）'
                //       },
                //       {  
                //         goods_d: 1609984862086794,
                //         img: 'https://img0.baidu.com/it/u=1414232962,2149362867&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                //         num: 3,
                //         price: '27897.00',
                //         text: '三星Galaxy Note20 Ultra 5G(SM-N9860)S Pen&三星笔记 120Hz自适应屏幕 5G手机游戏手机 12GB+256GB 初露白'
                //       }
                //     ]
                //   }
            ],
            judge: false
        }
    },

    methods: {
        isLogin() {
            const token = localStorage.getItem("token");
            if (token != null) {
                this.judge = true
            } else {
                this.judge = false
                // alert("请登录或注册！！")
                if (this.$route.path !== '/login' && this.$route.path !== '/register') {
                    this.$router.push('/login');
                }
                // return this.judge;
            }
            console.log(this.judge)
        },
        fetchOrderList() {
            // 调用后端API获取订单数据
            // 使用axios库进行请求
            axios({
                headers: {
                    'token': localStorage.getItem('token')
                },
                method: "get",
                url: "http://localhost:8085/order/getOrderList",
            }).then(response => {
                this.list = response.data.data.data;
                console.log(this.list)
            })
                .catch(error => {
                    console.error('获取数据失败:', error);
                });

        },
        // 付款
        pay() {
            this.$router.push('/pay');
        }
    },
    created() {
        this.isLogin();
    },
    mounted() {
        //  在组件挂载后调用API获取数据
        this.fetchOrderList();
    }
}
</script>
<style lang="less" scoped>
body {
    margin-right: 30px;
}

.orderList-table {

    // outline: 1px solid rgb(219, 215, 215);
    // margin-top: -5px;
    // margin-left: 180px;
    // margin-right: 180px;
    .order_info {
        width: 400px;
    }

    .receiver_name {
        width: 100px;
    }

    .receiver_mobile {
        width: 107px;
    }

    .receiver_address {
        width: 107px;
    }

    .receiver_remark {
        width: 107px;
    }

    .order_price {
        width: 107px;
    }

    .order_num {
        width: 55px;
    }

    .oreceiver_addresss {
        width: 110px;
    }

    .real_pay {
        width: 128px;
    }

    .order_status {
        width: 110px;
    }

    .order_handle {
        width: 110px;
    }

    // 表格数据
    .order-body {
        .body_top {
            .body_top_con {
                background: #f5f5f5;
                border: 1px solid #e5e5e5;
                width: 1207px;
                padding: 10px;
                display: flex;
                justify-content: space-between;

                .top_con_shop {
                    .top_con_time {
                        color: #3c3c3c;
                        font-weight: bold;
                        margin: 0 10px 0 0;
                    }

                    .top_con_num {
                        margin: 0 50px 0 0;
                    }
                }

                .top_con_del {
                    cursor: pointer;

                    .el-icon-delete:before {
                        content: '\e6d7';
                        font-size: 15px;
                    }
                }
            }
        }

        .body_content {
            p {
                margin: 4px 0;
            }
        }

        // 商品信息
        .body_content_info {
            width: 400px;
            border-top: unset;

            .info_box {
                display: flex;
                align-items: center;
                margin: 0 10px;

                .info_box_img {
                    cursor: pointer;
                    width: 80px;
                    flex: 0 0 80px;
                    margin-right: 10px;

                    img {
                        width: 80px;
                        height: 80px;
                    }
                }

                .info_describe {
                    .text {
                        margin-bottom: 6px;
                        cursor: pointer;

                        :hover {
                            color: red;
                        }
                    }

                    .attr {
                        color: #9e9e9e;

                        span {
                            margin-right: 6px;
                        }
                    }
                }
            }
        }

        // 单价
        .body_content_price {
            text-align: center;
            border-top: unset;
        }

        .body_content_name {
            text-align: center;
            border-top: unset;
        }

        .body_content_mobile {
            text-align: center;
            border-top: unset;
        }

        .body_content_address {
            text-align: center;
            border-top: unset;
        }

        .body_content_Remark {
            text-align: center;
            border-top: unset;
        }


        // 数量
        .body_content_num {
            text-align: center;
            border-top: unset;
            border-right: unset;
        }

        //商品操作
        .body_content_handle {
            text-align: center;
            border-top: unset;
        }

        // 实际付款
        .body_content_pay {
            text-align: center;
            border-top: unset;
        }

        .body_content_status {
            text-align: center;
            border-top: unset;

            .detail {
                cursor: pointer;

                :hover {
                    color: red;
                }
            }
        }

        .body_content_ohandle {
            text-align: center;
            border-top: unset;

            .order_cancel {
                cursor: pointer;

                :hover {
                    color: red;
                }
            }
        }
    }
}
</style>
<style lang="less">
.orderList {
    .order-body {

        td,
        th {
            padding: 10px 0;
            border: 1px solid #e5e5e5;
            vertical-align: top;
        }
    }
}
</style>
  